<svg:g [ngSwitch]="metaName">

  <svg:g *ngSwitchCase="'START'" class="composed-task">
    <svg:circle class="select-outline"/>
    <svg:g class="shape" tippy [content]="nodeTooltipElement ? nodeTooltipElement.nativeElement : ''"
           [tippyOptions]="{appendTo: docBody(), placement: 'bottom', delay: 300}"
           [attr.disabled]="isDisabled ? '' : null">
      <svg:circle class="start-outer"/>
      <svg:circle class="start-inner"/>
    </svg:g>
    <svg:text class="name-label"/>
    <svg:image class="error-marker" xlink:href="assets/img/error.svg"
               tippy [content]="markerTooltipElement ? markerTooltipElement.nativeElement : ''"
               [tippyOptions]="{appendTo: docBody(), placement: 'top', theme: 'error'}"
               [attr.disabled]="isDisabled ? '' : null"/>
    <svg:g class="flo-handles">
      <svg:text class="options-handle handle" (click)="showOptions()"></svg:text>
    </svg:g>
  </svg:g>

  <svg:g *ngSwitchCase="'END'" class="composed-task">
    <svg:ellipse class="select-outline"/>
    <svg:g class="shape" tippy [content]="nodeTooltipElement ? nodeTooltipElement.nativeElement : ''"
           [tippyOptions]="{appendTo: docBody(), placement: 'bottom', delay: 300}"
           [attr.disabled]="isDisabled ? '' : null">
      <svg:ellipse class="end-outer"/>
      <svg:ellipse class="end-inner"/>
    </svg:g>
    <svg:text class="name-label"/>
    <svg:image class="error-marker" xlink:href="assets/img/error.svg"
               tippy [content]="markerTooltipElement ? markerTooltipElement.nativeElement : ''"
               [tippyOptions]="{appendTo: docBody(), placement: 'top', theme: 'error'}"
               [attr.disabled]="isDisabled ? '' : null"/>
  </svg:g>

  <svg:g *ngSwitchCase="'SYNC'" class="composed-task">
    <ng-container *ngIf="isPalette(); then paletteSyncShape else canvasSyncShape"></ng-container>
  </svg:g>

  <svg:g *ngSwitchDefault class="composed-task">
    <ng-container *ngIf="isPalette(); then paletteComposedTaskShape else canvasComposedTaskShape"></ng-container>
  </svg:g>

</svg:g>

<ng-template #canvasComposedTaskShape>
  <svg:rect class="select-outline"/>
  <svg:g class="shape" tippy [content]="nodeTooltipElement ? nodeTooltipElement.nativeElement : ''"
         [tippyOptions]="{appendTo: docBody(), placement: 'bottom', delay: 300}"
         [attr.disabled]="isDisabled || !canShowCanvasNodeTooltip ? '' : null">
    <svg:rect class="box"/>
    <svg:text class="name-label"/>
    <svg:image class="type-icon"/>
    <!--<svg:g>-->
      <!--<svg:rect class="type-label-bg"/>-->
      <!--<svg:text class="name-label"/>-->
      <!--<svg:text class="type-label"/>-->
    <!--</svg:g>-->
  </svg:g>
  <svg:g class="input-port-group">
    <svg:g class="input-port"
      tippy [tippyOptions]="{content: 'Input Port', appendTo: docBody(), delay: 300}"
      [attr.disabled]="!isCanvas() || isDisabled ? '' : null">
      <svg:circle class="port-outer-circle-input"/>
      <svg:circle class="port-inner-circle-input"/>
    </svg:g>
  </svg:g>
  <svg:g class="output-port-group">
    <svg:g class="output-port"
      tippy [tippyOptions]="{content: 'Output Port', appendTo: docBody(), delay: 300}"
      [attr.disabled]="!isCanvas() || isDisabled ? '' : null">
      <svg:circle class="port-outer-circle-output"/>
      <svg:circle class="port-inner-circle-output"/>
    </svg:g>
  </svg:g>
  <svg:g class="flo-handles">
    <svg:text class="options-handle handle" (click)="showOptions()"></svg:text>
    <svg:text class="delete-handle handle" (click)="delete()"></svg:text>
  </svg:g>
  <svg:image class="error-marker" xlink:href="assets/img/error.svg"
    tippy [content]="markerTooltipElement ? markerTooltipElement.nativeElement : ''"
    [tippyOptions]="{appendTo: docBody(), placement: 'top', theme: 'error'}"
    [attr.disabled]="isDisabled ? '' : null"/>
</ng-template>

<ng-template #paletteComposedTaskShape>
  <svg:g class="shape" tippy [content]="nodeTooltipElement ? nodeTooltipElement.nativeElement : ''"
         [tippyOptions]="{appendTo: docBody(), placement: 'bottom', delay: 300}"
         [attr.disabled]="isDisabled || !canShowPaletteNodeTooltip ? '' : null">
    <svg:rect class="box"/>
    <svg:text class="palette-entry-name-label"/>
  </svg:g>
</ng-template>

<ng-template #canvasSyncShape>
  <svg:rect class="select-outline"/>
  <svg:g class="shape">
    <svg:rect class="box"/>
    <svg:text class="name-label"/>
  </svg:g>
  <svg:g class="input-port-group">
    <svg:g class="input-port"
      tippy [tippyOptions]="{content: 'Input Port', appendTo: docBody(), delay: 300}"
      [attr.disabled]="!isCanvas() || isDisabled ? '' : null">
      <svg:circle class="port-outer-circle-input"/>
      <svg:circle class="port-inner-circle-input"/>
    </svg:g>
  </svg:g>
  <svg:g class="output-port-group">
    <svg:g class="output-port"
      tippy [tippyOptions]="{content: 'Output Port', appendTo: docBody(), delay: 300}"
      [attr.disabled]="!isCanvas() || isDisabled ? '' : null">
      <svg:circle class="port-outer-circle-output"/>
      <svg:circle class="port-inner-circle-output"/>
    </svg:g>
  </svg:g>
  <svg:image class="error-marker" xlink:href="assets/img/error.svg"
    tippy [content]="markerTooltipElement ? markerTooltipElement.nativeElement : ''"
    [tippyOptions]="{appendTo: docBody(), placement: 'top', theme: 'error'}"
    [attr.disabled]="isDisabled ? '' : null"/>
  <svg:g class="flo-handles">
    <svg:text class="delete-handle handle" (click)="delete()"></svg:text>
  </svg:g>
</ng-template>

<ng-template #paletteSyncShape>
  <svg:g class="shape" tippy [content]="nodeTooltipElement ? nodeTooltipElement.nativeElement : ''"
         [tippyOptions]="{appendTo: docBody(), placement: 'bottom', delay: 300}"
         [attr.disabled]="isDisabled || !canShowPaletteNodeTooltip ? '' : null">
    <svg:rect class="box"/>
    <svg:text class="palette-entry-name-label"/>
  </svg:g>
</ng-template>

<div #nodeTooltip>
  <div ng-if="cell.attr('metadata/name')">
    <span>{{metaName | uppercase}}</span>&nbsp;<span>{{'(' + (metaGroup | capitalize) + ')'}}</span>
  </div>
  <div *ngIf="description">
    <span>{{description}}</span>
  </div>
  <table class="table-condensed" *ngIf="allProperties && isPropertiesShown">
    <tbody>
    <tr *ngFor="let property of keys(allProperties).sort()">
      <td class="tooltip-property-key"><strong>{{property}}</strong></td>
      <td class="tooltip-property-value" [ngClass]="{'tooltip-property-value-code': isCode(property)}">{{
        getPropertyValue(property)}}
      </td>
    </tr>
    </tbody>
  </table>
</div>

<ul #markerTooltip class="marker-tooltip">
  <li *ngFor="let msg of getErrorMessages()">{{msg}}</li>
</ul>
